<template>
  <div class="main">
    <mine-title>新增角色</mine-title>
    <div class="content" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <el-form
              ref="form"
              :model="form"
              label-width="110px"
              :rules="rules"
            >
              <el-form-item label="角色名称：" prop="name">
                <el-input v-model="form.name" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="权限字符：" prop="code">
                <el-input v-model="form.code" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" :rows="4" />
              </el-form-item>
              <el-form-item class="form-btn-row">
                <mine-button type="primary" @click="onCancel" secondary
                  >取 消
                </mine-button>
                <mine-button type="primary" @click="onSubmit"
                  >保 存</mine-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import authUtil from "../../../utils/authUtil";

export default {
  name: "AddRole",
  data() {
    return {
      form: {
        id: -1,
        name: "",
        code: "",
        remark: "",
      },
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入权限字符", trigger: "blur" }],
      },
      loading: false,
    };
  },
  computed: {},
  methods: {
    onSubmit() {
      let _this = this;
      this.$refs.form.validate(async (valid, object) => {
        let { form } = _this;
        if (valid) {
          this.loading = true;
          let result = await this.$store.dispatch(
            "roleAdmin/addRoleTableList",
            form
          );
          let data = result.data;
          if (data.code == 200) {
            this.$confirm("保存成功，是否需要返回列表？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.$router.push("/roleAdmin");
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            this.loading = false;
            this.$message.error(data.msg || "新建失败");
          }
        } else {
          return false;
        }
      });
    },
    onCancel() {
      (this.form = {
        id: -1,
        name: "",
        code: "",
        remark: "",
      }),
        this.$router.push("/roleAdmin");
    },
  },
  created() {
    this.$store.commit("SET_BREADCRUMB", [
      { title: "角色管理", path: "/roleAdmin" },
      { title: "新增角色", path: "" },
    ]);
  },
};
</script>

<style scoped>
</style>
